<template>
  <Card style="margin: 20px">
    <p slot="title">试题录入</p>
    <Form ref="form" :model="form" :rules="rules" :label-width="100">
      <FormItem label="学科: " prop="subjectID">
        <Select v-model="form.subjectID" style="width: 400px" @on-change="changeSubject">
          <Option v-for="item in subjectName" :value="item.value" :key="item.value">{{ item.label }}</Option>
        </Select>
      </FormItem>
      <FormItem label="目录: " prop="catalogID">
        <!-- 有个bug -->
        <Select v-model="form.catalogID" style="width: 400px">
          <Option v-for="item in catalogList" :value="item.value" :key="item.value">{{ item.label }}</Option>
        </Select>
      </FormItem>
      <FormItem label="企业: " prop="enterpriseID">
        <Select v-model="form.enterpriseID" style="width: 400px">
          <Option v-for="item in enterprise" :value="item.id" :key="item.id">{{ item.company }}</Option>
        </Select>
      </FormItem>
      <FormItem label="城市: " prop="province">
        <Select v-model="form.province" style="width: 200px" @on-change="changeProvince">
          <Option v-for="item in provincesList" :value="item" :key="item">{{ item }}</Option>
        </Select>
        <Select v-model="form.city" style="width: 200px">
          <Option v-for="item in cityList" :value="item" :key="item">{{ item }}</Option>
        </Select>
      </FormItem>
      <FormItem label="方向: " prop="direction">
        <Select v-model="form.direction" style="width: 400px">
          <Option v-for="item in direction" :value="item" :key="item">{{ item }}</Option>
        </Select>
      </FormItem>
      <FormItem label="试题类型: " prop="questionType">
        <RadioGroup v-model="form.questionType">
          <Radio :label="item.value" v-for="item in questionType" :value="item.value" :key="item.value">
            <span style="color: #409eff">{{ item.label }}</span>
          </Radio>
        </RadioGroup>
      </FormItem>
      <FormItem label="难度: " prop="difficulty">
        <RadioGroup v-model="form.difficulty">
          <Radio :label="item.value" v-for="item in difficulty" :value="item.value" :key="item.value">
            <span style="color: #409eff">{{ item.label }}</span>
          </Radio>
        </RadioGroup>
      </FormItem>
      <FormItem label="题干: " style="width: 100%; height: 239px" prop="question">
        <quill-editor v-model="form.question" :options="editorOption" style="height: 200px" />
      </FormItem>
      <!-- 单选 -->
      <FormItem label="选项: " v-if="form.questionType === 1">
        <RadioGroup v-model="itemNum" vertical @on-change="changeRadio">
          <Radio :label="item.code" style="margin-bottom: 40px" v-for="item in form.options" :key="item.code" :true-value="item.isRight">
            <span>{{ item.code }}: </span>
            <Input v-model="item.title"></Input>
            <Badge>
              <span class="imgToggle demo-badge">上传图片</span>
              <Icon @click="delOptions(item.code)" type="ios-close-circle-outline" slot="count" size="16" />
            </Badge>
          </Radio>
        </RadioGroup>
      </FormItem>
      <!-- 多选 -->
      <FormItem label="选项: " v-else-if="form.questionType === 2">
        <CheckboxGroup v-model="itemArray" @on-change="changeCheckbox">
          <Checkbox :label="item.code" style="margin-bottom: 10px; width: 100%" v-for="item in form.options" :key="item.code">
            <span>{{ item.code }}: </span>
            <Input v-model="item.title" style="width: 333px"></Input>
            <Badge>
              <span class="imgToggle demo-badge">上传图片</span>
              <Icon @click="delOptions(item.code)" type="ios-close-circle-outline" slot="count" size="16" />
            </Badge>
          </Checkbox>
        </CheckboxGroup>
      </FormItem>
      <FormItem style="width: 100%">
        <el-button @click="addOptions" type="danger" :disabled="form.questionType !== 2" size="small">+增加选项与答案</el-button>
      </FormItem>
      <FormItem label="解析视频: ">
        <Input v-model="form.videoURL" placeholder="" style="width: 400px"></Input>
      </FormItem>
      <FormItem label="答案解析: " style="width: 100%; height: 239px" prop="answer">
        <quill-editor v-model="form.answer" :options="editorOption" style="height: 200px" />
      </FormItem>
      <FormItem label="题目备注: ">
        <Input v-model="form.remarks" type="textarea" placeholder="" style="width: 400px"></Input>
      </FormItem>
      <FormItem label="试题标签: ">
        <Select v-model="form.tags" style="width: 400px" multiple>
          <Option v-for="item in tagsList" :value="item.value" :key="item.value">{{ item.label }}</Option>
        </Select>
      </FormItem>
      <FormItem style="width: 100%">
        <Button type="primary" @click="handleSubmit">确认提交</Button>
      </FormItem>
    </Form>
  </Card>
</template>

<script>
import { add, detail, update } from '@/api/hmmm/questions'
import { simple } from '@/api/hmmm/subjects'
import { provinces, citys } from '@/api/hmmm/citys'
import { difficulty, questionType, direction } from '@/api/hmmm/constants'
import { simple as catalogSimple } from '@/api/hmmm/directorys'
import { simple as tagsSimple } from '@/api/hmmm/tags'
import { list } from '@/api/hmmm/companys'
export default {
  data () {
    return {
      form: {
        subjectID: '', // 学科
        catalogID: '', // 目录
        enterpriseID: '', // 企业
        province: '', // 企业所在地省份
        city: '', // 企业所在城市
        direction: '', // 方向
        questionType: 1, // 题型
        difficulty: 1, // 难度
        question: '', // 题干
        options: [
          { isRight: false, code: 'A', title: '', img: '' },
          { isRight: false, code: 'B', title: '', img: '' },
          { isRight: false, code: 'C', title: '', img: '' },
          { isRight: false, code: 'D', title: '', img: '' }
        ], // 选项
        videoURL: '', // 解析视频
        answer: '', // 答案解析
        remarks: '', // 题目备注
        tags: '' // 标签
      },
      rules: {
        subjectID: [{ required: true, message: '请选择学科', trigger: 'blur', type: 'number' }],
        catalogID: [{ required: true, message: '请选择目录', trigger: 'blur', type: 'number' }],
        enterpriseID: [{ required: true, message: '请选择企业', trigger: 'blur', type: 'number' }],
        province: [{ required: true, message: '请选择企业所在省份', trigger: 'blur' }],
        city: [{ required: true, message: '请选择企业所在城市', trigger: 'blur' }],
        direction: [{ required: true, message: '请选择方向', trigger: 'blur' }],
        questionType: [{ required: true, message: '请选择题型', trigger: 'blur', type: 'number' }],
        difficulty: [{ required: true, message: '请选择难度', trigger: 'blur', type: 'number' }],
        question: [{ required: true, message: '请输入题干', trigger: 'blur' }],
        answer: [{ required: true, message: '请输入答案解析', trigger: 'blur' }]
      },
      subjectName: [], // 学科名字
      catalogList: [], // 目录
      enterprise: [], // 企业名字
      tagsList: [], // 标签
      difficulty, // 难度
      questionType, // 试题类型
      direction, // 方向
      provincesList: [], // 省份
      cityList: [], // 城市
      editorOption: {
        //  富文本编辑器配置
        modules: {
          // 工具栏定义的
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线 -----['bold', 'italic', 'underline', 'strike']
            [{ list: 'ordered' }, { list: 'bullet' }], // 有序、无序列表-----[{ list: 'ordered' }, { list: 'bullet' }]
            ['blockquote', 'code-block'], // 引用  代码块-----['blockquote', 'code-block']
            ['image', 'link'] // 链接、图片、视频-----['link', 'image', 'video']
          ]
        },
        // 主题
        placeholder: ''
      },
      itemNum: '', // 单选
      itemArray: [], // 多选
      togglebox: 1,
      code: 65
    }
  },
  async created () {
    this.list()
    if (this.$route.query.id) {
      const id = this.$route.query.id
      // console.log(id)
      const result = await detail({ id })
      // console.log(result)
      result.data.questionType = +result.data.questionType
      result.data.difficulty = +result.data.difficulty
      // console.log(result.data)
      this.form = result.data
      // console.log(this.form.city)
      const catalogList = await catalogSimple({ subjectID: this.form.subjectID })
      // console.log(catalogList)
      this.catalogList = catalogList.data
      console.log(this.catalogList)
      console.log(this.form.tags)
      console.log(this.form)
      this.cityList = citys(this.form.province)
      // console.log(this.cityList)
      // console.log(this.form)
      if (this.form.questionType === 1) {
        this.form.options.forEach((item) => {
          if (item.isRight === 1) {
            this.itemNum = item.code
            // item.isRight = true
          }
        })
        this.changeSubject()
      } else {
        this.form.options.forEach((item) => {
          if (item.isRight === 1) {
            this.itemArray.push(item.code)
          }
        })
      }
      // console.log(this.itemArray)
      // console.log(this.form.options)
      // this.changeRadio()
      // console.log(this.form)
      // this.form.
    }
    // console.log(this.$route.query)
    this.provincesList = provinces()
  },
  methods: {
    async list () {
      const { data } = await list()
      // console.log(data.items)
      this.enterprise = data.items
      const result = await simple()
      // console.log(result)
      this.subjectName = result.data
    },
    async changeSubject () {
      this.catalogList = []
      const catalogList = await catalogSimple({ subjectID: this.form.subjectID })
      console.log(catalogList)
      this.catalogList = catalogList.data
      const tagsList = await tagsSimple({ subjectID: this.form.subjectID })
      this.tagsList = tagsList.data
      console.log(this.tagsList)
    },
    changeProvince () {
      // console.log(this.form.province)
      this.form.city = ''
      this.cityList = citys(this.form.province)
      // console.log(this.cityList)
    },
    handleSubmit () {
      this.$refs.form.validate(async (valid) => {
        // console.log(valid)
        if (valid) {
          if (this.form.id) {
            this.form.difficulty = this.form.difficulty + ''
            this.form.questionType = this.form.questionType + ''
            if (Array.isArray(this.form.tags)) {
              this.form.tags = this.form.tags.join(',')
            }
            // console.log(this.form.tags)
            // this.form.options.forEach(item => {
            //   if (item.isRight === 1) {
            //     item.isRight = true
            //   } else {
            //     item.isRight = false
            //   }
            // })
            console.log(this.form.options)
            await update(this.form)
            this.$Message.success('修改试题成功')
            this.$router.back()
          } else {
            this.form.difficulty = this.form.difficulty + ''
            this.form.questionType = this.form.questionType + ''
            if (Array.isArray(this.form.tags)) {
              this.form.tags = this.form.tags.join(',')
            }
            // console.log(this.form.tags)
            await add(this.form)
            this.$router.push({
              path: '/questions/list'
            })
            this.$Message.success('新增试题成功')
          }
        }
      })
    },
    // 添加选项
    addOptions () {
      const last = this.form.options[this.form.options.length - 1]
      // console.log(last)
      const obj = JSON.parse(JSON.stringify(last))
      console.log(obj === last)
      const char = obj.code.charCodeAt(0)
      const code = String.fromCharCode(char + 1)
      obj.code = code
      // console.log(this.form.options)
      // console.log(code)
      this.form.options.push(obj)
    },
    changeRadio (params) {
      console.log(params)
      // console.log(123)
      this.form.options.forEach((item) => {
        item.isRight = false
        if (item.code === params) {
          item.isRight = true
        }
      })
      // console.log(this.form.options)
    },
    changeCheckbox (params) {
      // console.log(params)
      this.form.options.forEach((item) => {
        params.some((key) => {
          if (item.code === key) {
            item.isRight = true
            return true
          } else {
            item.isRight = false
          }
        })
      })
      // console.log(this.form.options)
    },
    // 删除选项
    delOptions (code) {
      this.code = 65
      this.form.options = this.form.options.filter((item) => item.code !== code)
      this.form.options.forEach((item) => {
        item.code = String.fromCharCode(this.code)
        this.code++
      })
      console.log(code)
    }
  }
}
</script>
<style scoped >
.imgToggle {
  display: inline-block;
  width: 100px;
  height: 60px;
  border: 1px dashed #ccc;
  border-radius: 6px;
  text-align: center;
  line-height: 60px;
  margin-left: 5px;
}
.imgToggle:hover {
  border: 1px dashed #4493e7;
}
.demo-badge {
  border-radius: 6px;
  display: inline-block;
}
</style>
